<script setup>
import { ref, computed } from 'vue'

const imageUrl = ref('https://picsum.photos/200/200')
const linkUrl = ref('https://vuejs.org/')
const imageClass = ref('dynamic-image')
const isActive = ref(true)
const hasError = ref(false)
const count = ref(0)
const theme = ref('light')
const size = ref('medium')
const userInput = ref('')

// 计算属性示例
const buttonClass = computed(() => {
  return {
    'btn': true,
    'btn-active': isActive.value,
    'btn-error': hasError.value,
    'btn-large': size.value === 'large',
    'btn-small': size.value === 'small'
  }
})

const containerStyle = computed(() => {
  return {
    backgroundColor: theme.value === 'dark' ? '#333' : '#fff',
    color: theme.value === 'dark' ? '#fff' : '#333',
    padding: '20px',
    borderRadius: '8px',
    transition: 'all 0.3s ease'
  }
})

const imageStyle = computed(() => {
  return {
    transform: `scale(${1 + count.value * 0.1})`,
    filter: `grayscale(${hasError.value ? 100 : 0}%)`,
    transition: 'all 0.3s ease'
  }
})

// 方法
const toggleActive = () => {
  isActive.value = !isActive.value
}

const toggleError = () => {
  hasError.value = !hasError.value
}

const incrementCount = () => {
  count.value++
}

const resetCount = () => {
  count.value = 0
}

const switchTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

const changeSize = (newSize) => {
  size.value = newSize
}

const updateImageUrl = () => {
  // 生成一个新的随机图片URL
  imageUrl.value = `https://picsum.photos/200/200?random=${Date.now()}`
}

const updateLinkUrl = (url) => {
  linkUrl.value = url
}
</script>

<template>
  <div class="demo-container" :style="containerStyle">
    <h2>v-bind 属性绑定演示</h2>
    <p>当前主题: {{ theme }} | 活跃状态: {{ isActive }} | 错误状态: {{ hasError }} | 计数: {{ count }}</p>
    
    <!-- 动态绑定 src 和 alt 属性 -->
    <div class="example">
      <h3>1. 动态绑定图片 src 和 alt</h3>
      <img 
        :src="imageUrl" 
        :alt="'随机图片 - ' + count" 
        width="200" 
        height="200"
        :style="imageStyle"
      />
      <p>图片 URL: {{ imageUrl }}</p>
      <button @click="updateImageUrl">更新图片</button>
    </div>
    
    <!-- 动态绑定链接 href -->
    <div class="example">
      <h3>2. 动态绑定链接 href</h3>
      <p>点击下面的链接访问 Vue 官网:</p>
      <a :href="linkUrl" target="_blank">Vue 官方网站</a>
      <p>链接 URL: {{ linkUrl }}</p>
      <button @click="updateLinkUrl('https://vitejs.dev/')">切换到 Vite 网站</button>
      <button @click="updateLinkUrl('https://vuejs.org/')">切换到 Vue 网站</button>
    </div>
    
    <!-- 动态绑定 class -->
    <div class="example">
      <h3>3. 动态绑定 class</h3>
      <div :class="imageClass">
        固定类名的元素
      </div>
      
      <div :class="buttonClass">
        动态类名的元素
      </div>
      
      <button @click="toggleActive">切换 Active 状态: {{ isActive }}</button>
      <button @click="toggleError">切换 Error 状态: {{ hasError }}</button>
      <button @click="changeSize('small')">小尺寸</button>
      <button @click="changeSize('medium')">中等尺寸</button>
      <button @click="changeSize('large')">大尺寸</button>
    </div>
    
    <!-- 动态绑定 style -->
    <div class="example">
      <h3>4. 动态绑定 style</h3>
      <div 
        :style="{ 
          backgroundColor: isActive ? '#42b883' : '#ccc',
          padding: '20px',
          color: 'white',
          fontWeight: 'bold',
          transform: `rotate(${count * 10}deg)`,
          transition: 'all 0.3s ease'
        }"
      >
        动态样式元素 (旋转角度: {{ count * 10 }}°)
      </div>
    </div>
    
    <!-- 计数器 -->
    <div class="example">
      <h3>5. 动态绑定其他属性</h3>
      <button @click="incrementCount">增加计数: {{ count }}</button>
      <button @click="resetCount">重置计数</button>
      <p :title="'当前计数是: ' + count">
        鼠标悬停查看 title 属性
      </p>
    </div>
    
    <!-- 双向绑定和动态属性示例 -->
    <div class="example">
      <h3>6. 双向绑定影响属性</h3>
      <input v-model="userInput" placeholder="输入一些文本" />
      <p :class="{ 'highlight': userInput.length > 10 }">
        输入的内容: "{{ userInput }}" 
        <span v-if="userInput.length > 10">(内容较长)</span>
      </p>
      <button :disabled="userInput.length === 0">提交按钮 (当无输入时禁用)</button>
    </div>
    
    <!-- 主题切换 -->
    <div class="example">
      <h3>7. 动态主题切换</h3>
      <button @click="switchTheme">切换到 {{ theme === 'light' ? '暗色' : '亮色' }} 主题</button>
      <p>观察整个演示区域背景色和文字颜色的变化</p>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.example {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.03);
}

.dynamic-image {
  border: 2px solid #42b883;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  background-color: #f9f9f9;
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-active {
  background-color: #42b883;
  color: white;
}

.btn-error {
  background-color: #e53935;
  color: white;
}

.btn-large {
  font-size: 1.2em;
  padding: 15px 30px;
}

.btn-small {
  font-size: 0.8em;
  padding: 5px 10px;
}

button {
  margin: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #42b883;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.5;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>